<template lang="pug">
    skin(@up="up",@down="down",@yes="yes",@back="back",@duringUp="up",@duringDown="down")
        div(class="flex-column")
            div(class="flex-column-item flex-center-center h3 under-line") ----临基率设置----
            div(class="flex-column-item flex-row flex-center h3" v-for="(menu,index) in currentPageMenus",
            :class="{'selected-text': menu.id == activeId ? true: false}")
                div(class="flex-row-item")
                    span {{menu.name}}
                    span(v-if="index != '2'") :
                div(class="flex-row-item right",:style="{flex:index == 2 ? 0 : 0.5,'text-align':'right'}")
                    span {{menu.amount}}
                    span(v-if="index != '2'") {{menu.unit}}
        amount-control(v-model="active",:visible="amountVisible")

</template>

<script>
    import TemporaryBasicRateMode from "@/model/TemporaryBasicRate";

    var repo = new TemporaryBasicRateMode();

    import moment from 'moment';

    export default {
        // 取消方波输入
        data() {
            return {
                activeId: 0,
                active: null,
                page: {maxResultCount: 3, skipCount: 0},
                amountVisible: false,
                repo: repo,
                isOn: window.rate.temp.isOn
            };
        },
        computed: {
            menus() {
                const still = this.getStillMinute();
                const amount = this.getAmount();
                return [
                    {
                        name: "持续时间",
                        id: 0,
                        amount: still,
                        unit: "小时",
                        max: 24,
                        min: 0,
                        increment: 1
                    },
                    {
                        name: "临基率",
                        id: 1,
                        amount: amount,
                        unit: window.rate.temp.value.value == "percentage" ? "%" : "±",
                        max: window.rate.temp.value.value == "percentage" ? 240 : 9.5,
                        min: window.rate.temp.value.value == "percentage" ? 0 : -9.5,
                        increment: window.rate.temp.value.value == "percentage" ? 10 : 0.1
                    },
                    {
                        name: window.rate.temp.isOn ? "取消临基率输注>>" : "开始临基率输注>>",
                        id: 2,
                        isAction: true
                    }
                ];
            },
            currentPageMenus() {
                const start = this.page.skipCount;
                const end = this.page.skipCount + this.page.maxResultCount;
                return this.menus.slice(start, end);
            }
        },
        methods: {
            // 持续时间
            getStillMinute() {
                if (!window.rate.temp.isOn) return 0;
                return moment().diff(moment(window.rate.temp.startAt), "hour");
            },
            getAmount() {
                if (!window.rate.temp.isOn) {
                    return window.rate.temp.value.value == "percentage" ? 100 : 0;
                } else {
                    return window.rate.temp.value.value == "percentage" ?
                        window.rate.temp.percentage :
                        window.rate.temp.deviation;
                }
            },
            getActive(id) {
                return this.menus.find(menu => {
                    return menu.id == id;
                });
            },
            up() {
                if (this.amountVisible) {
                    this.active.amount =
                        this.active.amount == this.active.max
                            ? this.active.min
                            : (this.active.amount * 10 + this.active.increment * 10) / 10;
                } else {
                    if (this.activeId == 0) {
                        // this.page.skipCount = 3;
                    } else if (this.activeId == 3) {
                        this.page.skipCount = 0;
                    }

                    if (this.activeId == 0) {
                        this.activeId = this.menus[this.menus.length - 1].id;
                    } else {
                        this.activeId = this.activeId - 1;
                    }

                    this.active = this.getActive(this.activeId);
                }
            },
            down() {
                if (this.amountVisible) {
                    this.active.amount =
                        this.active.amount == this.active.min
                            ? this.active.max
                            : (this.active.amount * 10 - this.active.increment * 10) / 10;
                } else {
                    if (this.activeId == 2) {
                        // this.page.skipCount = 3;
                    } else if (this.activeId == 5) {
                        this.page.skipCount = 0;
                    }

                    if (this.activeId == this.menus[this.menus.length - 1].id) {
                        this.activeId = 0;
                    } else {
                        this.activeId = this.activeId + 1;
                    }
                    this.active = this.getActive(this.activeId);
                }
            },

            back() {
                if (this.amountVisible) this.amountVisible = false;
                else this.$router.push("/base-rate?index=4");
            },
            yes() {
                if (this.active.isAction) {
                    if (window.rate.temp.isOn) {
                        // 停止临基率输注
                        window.rate.temp.isOn = false;
                    } else {
                        // 开始临基率输注
                        window.rate.temp.isOn = true;
                        if (window.rate.temp.value.value == "percentage") {
                            window.rate.temp.percentage = this.menus[1].amount;
                        } else {
                            window.rate.temp.deviation = this.menus[1].amount;
                        }
                        window.rate.temp.stillMinutes = this.menus[0].amount * 60; // 持续时间
                        window.rate.temp.startAt = new Date();
                    }

                    this.$router.push("/");
                } else if (!window.rate.temp.isOn) {
                    this.amountVisible = !this.amountVisible;
                }
            }
        },
        created() {
            this.active = this.menus[0];
        }
    };
</script>

<style lang="less">
</style>
